<template>
  <div class="cartDetails_container">
    <header>
        <h1>购物车</h1>
        <P>柳州市城中区科技大学<i class="fa fa-angle-down" aria-hidden="true" /></P>
        <p><i class="fa fa-edit" aria-hidden="true" /></p>
    </header>
    <div class="context">
        <div class="left">
            <p><i class="fa fa-list" aria-hidden="true" />我常买</p>
        </div>
        <div class="right">
            <p><img src="/img/supermarket.png">全能超市<i class="fa fa-angle-right" aria-hidden="true" /></p>
        </div>
    </div>
    <div class="one">
        <div class="title">
            <p >1 件无法购买商品</p>
            <span>收起<i class="fa fa-angle-up" aria-hidden="true" /></span>
        </div>
        <div class="cart_list">
            <ul>
                <li v-for="item in cartItem" :key="item.id">
                    <div class="good_header">
                        <input type="radio">
                        <p>{{ item.businessName }}<i class="fa fa-angle-right" aria-hidden="true" /></p>
                        <span>{{ item.distance }}</span>
                        <i class="fa fa-trash" aria-hidden="true" />
                    </div>
                    <div class="good_body">
                        <input type="radio">
                            <img src="/img/dcfl02.png">
                            <div class="two">
                                <p>{{ item.foodName }}</p>
                                <div class="three">
                                    <span>￥{{item.allPrice}}</span>
                                    <p>×{{ item.quantity }}</p>
                            </div>
                        </div>
                    </div>
                </li>

            </ul>
        </div>
    </div>
    <Footer></Footer>
  </div>


</template>



<script>
import Footer from '@/components/Footer.vue'

export default {
    components:{
        Footer
    },
    data(){
        return{
            cartList:JSON.parse(this.$route.query.cartList),
            foodList:JSON.parse(this.$route.query.foodList),
            // businessInfo:JSON.parse(this.$route.query.businessInfo),
            cartItem:[]
        }
    },
    mounted() {
        this.getCartItem();
    },
    methods:{
        getCartItem(){
            console.log(this.businessInfo)
            console.log(this.businessId)
            console.log(this.cartList)
            console.log(this.foodList)
            this.businessName = "麦当劳"
            for(let i = 0;i<this.cartList.length;i++){
                let itemInfo = {id:"",
                                businessName:this.businessName,
                                foodName:"",    
                                quantity:1,
                                distance:"可配送",
                                allPrice:0};
                for(let j = 0;j<this.foodList.length;j++){
                    if(this.cartList[i].foodId==this.foodList[j].foodId){
                        if(i == 0){
                            itemInfo.distance="超出配送范围";
                        }
                        itemInfo.allPrice=this.foodList[j].foodPrice*this.cartList[i].quantity;
                        itemInfo.quantity = this.cartList[i].quantity;
                        itemInfo.foodName = this.foodList[j].foodName;
                        this.cartItem.push(itemInfo);
                        break;
                    }
                }
            }
            console.log(this.cartItem);
        }
    }

}
</script>

<style scoped>

.cartDetails_container{
    width: 100%;
    background-color: #fdf8f8;
    position: relative;
    padding-bottom: 14vw;
}

.cartDetails_container header{
    display: flex;
    justify-content: left;
    align-items: center;
}
.cartDetails_container header h1{
    font-size: 8vw;
    margin: 2vw;
}
.cartDetails_container header p:first-of-type{
    flex: 1;
    font-size: 4.8vw;
    font-weight: 550;
}
.cartDetails_container header p:first-of-type i{
    flex: 1;
    font-size: 4.8vw;
    font-weight: 700;
    margin: 0vw 2vw;
}
.cartDetails_container header p:last-of-type{
    font-size: 10vw;
}

.cartDetails_container .context{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: white;
}

.cartDetails_container .context .left{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
    border:0.3vw solid black;
    border-radius: 2vw;
    width: 45vw;
    margin: 2vw;
    padding: 2vw 0vw;
    font-weight: 700;
    font-size: 3.8vw;
}
.cartDetails_container .context .left i{
    margin: 0vw 1vw;
}

.cartDetails_container .context .right{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
    border:0.3vw solid black;
    border-radius: 2vw;
    width: 45vw;
    margin: 2vw;
    padding: 2vw 0vw;
    font-weight: 700;
    font-size: 3.8vw;
}
.cartDetails_container .context .right i{
    margin: 0vw 2vw;
}


.cartDetails_container .context .right img{
    width: 4vw;
    height: 4vw;
    /* padding-top: 1vw; */
    margin: 0vw 1vw;
}
.cartDetails_container .one{
    width: 95%;
    margin: 0vw auto;
}

.cartDetails_container .one .title{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fdf8f8;
    border-radius: 2vw;
    margin: 0vw auto;
}
.cartDetails_container .one .title p{
    font-size: 3.8vw;
    font-weight: 600;
    margin-left: 2vw;
}
.cartDetails_container .one .title span{
    font-size: 3.8vw;
    font-weight: 600;
    margin-right: 2vw;
}


.cartDetails_container .one .cart_list .good_header{
    display: flex;
    justify-content: left;
    align-items: center;
    width: 100%;
    margin-top: 5vw;
}
.cartDetails_container .one .cart_list .good_header input{
    width: 5vw;
    height: 5vw;
}
.cartDetails_container .one .cart_list .good_header p{
    font-size: 5.0vw;
    margin: 0vw 2vw;
    font-weight: 600;
}
.cartDetails_container .one .cart_list .good_header p i{
    font-size: 5.0vw;
    margin: 0vw 2vw;
    font-weight: 600;
}
.cartDetails_container .one .cart_list .good_header span{
    font-size: 3.8vw;
    margin: 0vw 2vw;
    background-color: #c0baba;
    border-radius: 1vw;
    padding: 0.5vw;
}


.cartDetails_container .one .cart_list .good_body{
    display: flex;
    justify-content: left;
    align-items: center;
    width: 100%;
    margin: 3vw 0vw;
}
.cartDetails_container .one .cart_list .good_body input{
    width: 7vw;
    height: 7vw;
}
.cartDetails_container .one .cart_list .good_body img{
    width: 20vw;
    height: 20vw;
    margin: 0vw 2vw;
}
.two{
    width: 100%;
    margin: 4vw 1vw;
}
.two > p{
    font-size: 4.0vw;
    font-weight: 550;
}

.three{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 2vw;
}
.three span{
    font-size: 4.8vw;
}

.three p{
    font-size: 3.8vw;
    color: #a8a5a5;
}










</style>